/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 竞彩足球选择页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Accordion,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 显示赛事筛选
      showSSSX: false,
      // 显示mask
      showMask: false,
      // 选中的玩法比率
      checkedData: [],
      // 玩法数据列表
      methodList: [
        {
          name: '胜平负混合',
          id: 1,
        },
        {
          name: '胜平负',
          id: 2,
        },
        {
          name: '让球胜平负',
          id: 3,
        },
        {
          name: '比分',
          id: 4,
        },
        {
          name: '总进球',
          id: 5,
        },
        {
          name: '半全场胜平负',
          id: 6,
        },
        {
          name: '混合2选1',
          id: 7,
        },
        {
          name: '单关固赔',
          id: 8,
        },
      ],
      // 选中的玩法id
      checkedMethodId: 1,
      // 选中的赛事id
      checkedSSId: 'all',
      // 赛事列表
      gameList: [
        {
          name: '全部',
          id: 'all',
        },
        {
          name: '仅五大联赛',
          id: 1,
        },
        {
          name: '世界杯',
          id: 2,
        },
        {
          name: '美职联',
          id: 3,
        },
        {
          name: '欧冠',
          id: 4,
        },
        {
          name: '韩K联',
          id: 5,
        },
      ],
      // 购彩彩票列表
      lotteryList: [
        {
          date: '07月15日周六',
          time: '1:30-次日10:40',
          children: [
            {
              name: '英超', // 比赛名字
              date: '周六', // 日期
              num: '101', // 第几场
              time: '22:00', // 截至时间
              hostName: '曼联', // 主队
              guessName: '利物浦', // 客队
              playMethod: { // 全部玩法
                spf: { // 胜平负
                  spf1: [ // 普通胜平负
                    {
                      name: '主胜',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '平',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '客胜',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                  spf2: [ // 可让一球胜平负
                    {
                      name: '主胜',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '平',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '客胜',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                },
                bf: { // 比分玩法
                  bf1: [ // 胜
                    {
                      name: '1:0',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '2:0',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '3:0',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                  bf2: [ // 平
                    {
                      name: '0:0',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '1:1',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '2:2',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                  bf3: [ // 负
                    {
                      name: '0:1',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '1:2',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '2:3',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                },
                zjq: [ // 总进球
                  {
                    name: '0球',
                    rate: 1.22,
                    id: 1,
                  },
                  {
                    name: '1球',
                    rate: 1.22,
                    id: 2,
                  },
                  {
                    name: '7+球',
                    rate: 1.22,
                    id: 3,
                  },
                ],
                bqc: [ // 半全场
                  {
                    name: '胜/胜',
                    rate: 1.22,
                    id: 1,
                  },
                  {
                    name: '胜/平',
                    rate: 1.22,
                    id: 2,
                  },
                  {
                    name: '胜/负',
                    rate: 1.22,
                    id: 3,
                  },
                ],
              },
            },
          ],
        },
        {
          date: '07月15日周日',
          time: '1:30-次日12:40',
          children: [
            {
              name: '英超', // 比赛名字
              date: '周六', // 日期
              num: '101', // 第几场
              time: '22:00', // 截至时间
              hostName: '曼联', // 主队
              guessName: '利物浦', // 客队
              playMethod: { // 全部玩法
                spf: { // 胜平负
                  spf1: [ // 普通胜平负
                    {
                      name: '主胜',
                      rate: 1.99,
                      id: 11,
                    },
                    {
                      name: '平',
                      rate: 1.99,
                      id: 22,
                    },
                    {
                      name: '客胜',
                      rate: 1.99,
                      id: 33,
                    },
                  ],
                  spf2: [ // 可让一球胜平负
                    {
                      name: '主胜',
                      rate: 1.99,
                      id: 11,
                    },
                    {
                      name: '平',
                      rate: 1.99,
                      id: 22,
                    },
                    {
                      name: '客胜',
                      rate: 1.99,
                      id: 33,
                    },
                  ],
                },
                bf: { // 比分玩法
                  bf1: [ // 胜
                    {
                      name: '1:0',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '2:0',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '3:0',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                  bf2: [ // 平
                    {
                      name: '0:0',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '1:1',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '2:2',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                  bf3: [ // 负
                    {
                      name: '0:1',
                      rate: 1.99,
                      id: 1,
                    },
                    {
                      name: '1:2',
                      rate: 1.99,
                      id: 2,
                    },
                    {
                      name: '2:3',
                      rate: 1.99,
                      id: 3,
                    },
                  ],
                },
                zjq: [ // 总进球
                  {
                    name: '0球',
                    rate: 1.22,
                    id: 1,
                  },
                  {
                    name: '1球',
                    rate: 1.22,
                    id: 2,
                  },
                  {
                    name: '7+球',
                    rate: 1.22,
                    id: 3,
                  },
                ],
                bqc: [ // 半全场
                  {
                    name: '胜/胜',
                    rate: 1.22,
                    id: 1,
                  },
                  {
                    name: '胜/平',
                    rate: 1.22,
                    id: 2,
                  },
                  {
                    name: '胜/负',
                    rate: 1.22,
                    id: 3,
                  },
                ],
              },
            },
          ],
        },
      ],
    }
  }

  /**
   * 创建头部菜单
   */
  createTitle=() => {
    const { checkedMethodId, methodList } = this.state
    const fi = methodList.find(v => v.id === checkedMethodId)
    if (fi) {
      const result = (
        <p onClick={this.onShowMethodMask}><span>{fi.name}</span><span className="app-icon icon-dropdown" /></p>
      )
      return result
    }

    return null
  }

  /**
   * 玩法筛选
   */
  onShowMethodMask=() => {
    const { showMask } = this.state
    this.setState({
      showMask: !showMask,
    })
  }


  /**
   * 切换玩法
   */
  onChangeMethod=(item) => {
    this.setState({
      showMask: false,
      checkedMethodId: item.id,
    })
  }


  /**
   * 点击遮罩层阴影部分，关闭mask
   */
  onMaskClick=(e) => {
    if (e.target && e.target.className === 'mask-content') {
      this.setState({
        showMask: false,
      })
    }
  }


  /**
   * 右方菜单
   */
  createRight=() => {
    const result = (
      <p>
        <span onClick={this.onClickSSSX} className="app-icon icon-sssx" style={{ marginRight: '1em' }} />
        <span onClick={this.onClickWFJS} className="app-icon icon-wfjs" />
      </p>
    )

    return result
  }

  /**
   * 点击赛事筛选
   */
  onClickSSSX=() => {
    const { showSSSX } = this.state
    this.setState({
      showSSSX: !showSSSX,
    })
  }

  /**
   * 点击玩法介绍
   */
  onClickWFJS=() => {
    // ..TODO
    Toast.info('完善中...', 1)
  }

  /**
   * 切换赛事
   */
  onChangeGame=(item) => {
    this.setState({
      checkedSSId: item.id,
      showSSSX: false,
    })
  }

  /**
   * fix touch to scroll background page on iOS
   */
  // onWrapTouchStart = (e) => {
  //   // fix touch to scroll background page on iOS
  //   if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
  //     return;
  //   }
  //   const pNode = closest(e.target, '.am-modal-content');
  //   if (!pNode) {
  //     e.preventDefault();
  //   }
  // }

  /**
   * 选中一种玩法
   * type1大类:如胜平负，比分，总进球
   * type2小类：如普通胜平负，让球胜平负，
   */
  onCheck=(type1, type2, item) => {
    const { checkedData } = this.state
    // 寻找对应数据
    const findIndex = checkedData.findIndex((v) => {
      if (v.type1 === type1 && v.type2 === type2 && v.value.id === item.id) {
        return true
      }
      return false
    })

    if (findIndex !== -1) {
      // 取消选中
      checkedData.splice(findIndex, 1)
    } else {
      // 选中
      checkedData.push({ type1, type2, value: item })
    }
    this.setState({
      checkedData,
    })
  }


  /**
   * 选好彩票
   */
  onNext=() => {
    console.log('选号了')
    // 跳转到提交页面
    this.props.history.push('/jczq/submit')
  }


  /**
   * 清空所有已选
   */
  onClearAll=() => {
    console.log('清空所有')
  }

  render() {
    const {
      methodList, showMask, checkedMethodId, showSSSX, gameList, checkedSSId, lotteryList, checkedData,
    } = this.state
    const { location = {} } = this.props
    const title = this.createTitle()
    const right = this.createRight()
    const tabs = [
      { title: '购彩', sub: '1' },
      { title: '开奖', sub: '2' },
    ]
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={right}
        />
        <div className="page-content contain-footer">
          <Tabs tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
          >
            <div>
              <Accordion defaultActiveKey="0" className="list-accordion" onChange={this.onChange}>
                {
                  lotteryList.map((item, index) => {
                    const result = (
                      <Accordion.Panel className="list-wrap" header={`${item.date} (${item.time}) ${item.children.length}场比赛`} key={index.toString()}>
                        {
                          item.children.map((v, i) => {
                            const re = (
                              <div className="list" key={i.toString()}>
                                <div className="list-left">
                                  <p>{v.name}</p>
                                  <p>{v.date}{v.num}</p>
                                  <p>{v.time}截至</p>
                                </div>
                                <div className="list-right">
                                  <div className="title-bar">
                                    <span>让球</span>
                                    <span>{v.hostName}&nbsp;&nbsp;VS&nbsp;&nbsp;{v.guessName}</span>
                                  </div>
                                  <div className="body">
                                    <div className="body-left">
                                      <div className="body-left-row">
                                        <span className="row-title">0</span>
                                        <p className="row-content">
                                          {v.playMethod.spf.spf1.map((value, key) => {
                                            const fi = checkedData.findIndex((va) => {
                                              if (va.type1 === 'spf' && va.type2 === 'spf1' && va.value.id === value.id) {
                                                return true
                                              }
                                              return false
                                            })
                                            const r = (
                                              <p className={fi === -1 ? 'row-item' : 'row-item ltr-orange-red'} key={key.toString()} onClick={() => this.onCheck('spf', 'spf1', value)}>
                                                <span>{value.name}</span>
                                                <span>{value.rate}</span>
                                              </p>
                                            )
                                            return r
                                          })}
                                        </p>
                                      </div>
                                      <div className="body-left-row">
                                        <span className="row-title ltr-orange-red">+1</span>
                                        <p className="row-content">
                                          {v.playMethod.spf.spf2.map((value, key) => {
                                            const fi = checkedData.findIndex((va) => {
                                              if (va.type1 === 'spf' && va.type2 === 'spf2' && va.value.id === value.id) {
                                                return true
                                              }
                                              return false
                                            })
                                            const r = (
                                              <p className={fi === -1 ? 'row-item' : 'row-item ltr-orange-red'} key={key.toString()} onClick={() => this.onCheck('spf', 'spf2', value)}>
                                                <span>{value.name}</span>
                                                <span>{value.rate}</span>
                                              </p>
                                            )
                                            return r
                                          })}
                                        </p>
                                      </div>
                                    </div>
                                    <div className="body-right">
                                          已选<span>0</span>项
                                    </div>
                                  </div>
                                </div>
                              </div>
                            )
                            return re
                          })
                        }
                      </Accordion.Panel>
                    )
                    return result
                  })
                }

              </Accordion>

            </div>
            <div>
              开奖页面
            </div>
          </Tabs>

          {showMask ? (
            <div className="menu-mask" onClick={this.onMaskClick}>
              <div className="mask-content">
                <div className="method-list">
                  {
                    methodList.map((item, index) => (
                      <div className={item.id === checkedMethodId ? 'method-list-item item-active' : 'method-list-item'} key={index.toString()} onClick={() => this.onChangeMethod(item)}>
                        {item.name}
                      </div>
                    ))
                  }
                </div>
              </div>
            </div>
          ) : null}
        </div>

        <div className="page-footer">
          <div className="jczq-footer">
            <div className="left-icon" onClick={this.onClearAll}><img src="resource/image/delete.png" alt="" /></div>
            <div className="divider-vertical" />
            <div className="right-content">
              <p>已选<span className="font-red">2</span>场</p>
              <p>页面赔率仅供参考，请以出票赔率为准</p>
            </div>
            <Button type="red" disabled={false} onClick={this.onNext}>选好了</Button>
          </div>
        </div>
        <Modal
          visible={showSSSX}
          transparent
          maskClosable
          onClose={() => { this.setState({ showSSSX: false }) }}
          title="赛事筛选"
          footer={[]}
          // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
        >
          <div className="game-list">
            {
              gameList.map((item, index) => {
                const result = (
                  <div className={item.id === checkedSSId ? 'game-list-item item-active' : 'game-list-item'} key={index.toString()} onClick={() => this.onChangeGame(item)}>
                    {item.name}
                  </div>
                )
                return result
              })
            }
          </div>
        </Modal>
      </div>
    )
  }
}
